import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Form, Button } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';

const PlanForm = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;

  const { show = false, detail = {} } = visible;
  const { id } = detail;
  const [form] = Form.useForm();
  // 新增修改 传id修改 不传id新增
  const fetchRoleEdit = () => {
    form.validateFields().then((values) => {
      const { id } = detail;
      const payload = { ...detail, ...values, id };
      dispatch({
        type: id
          ? 'institution/fakeUpdatePlan'
          : 'institution/fakeInsertPlan',
        payload,
        callback: () => {
          onClose();
          handleCallback();
        },
      });
    });
  };

  const formItems = [
    {
      label: '计划名称',
      name: 'planName',
    },
    {
      label: '计划描述',
      name: 'planDesc',
      type: 'textArea',
    },
  ];

  const modalProps = {
    title: `${id ? '修改' : '新增'}`,
    visible: show,
    onClose,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
        确定
      </Button>
    ),
  };

  return (
    <DrawerCondition {...modalProps}>
      <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
    </DrawerCondition>
  );
};

export default connect(({ institution, loading }) => ({
  loading: loading.models.institution,
}))(PlanForm);
